<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-08-05 11:16:13
 * @LastEditors: charles
 * @LastEditTime: 2021-08-05 11:35:46
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>antv-g2plot</title>
  <!-- 1. 引入组件库 -->
  <script src="../g2plot.min.js"></script>
</head>
<body>
  <!-- 2. 创建一个容器用于容纳图表 -->
  <div id="container" style="height: 400px;"></div>
  <!-- 3. 创建g2Plot的实例对象，渲染 -->
  <script>
    // 3.1 创建折线图对象
    let Line = G2Plot.Line;
    let Column = G2Plot.Column;
    let plot = new Column('container',{
      data:[
        { year: '1991', value: 3 },
        { year: '1992', value: 4 },
        { year: '1993', value: 3.5 },
        { year: '1994', value: 5 },
        { year: '1995', value: 4.9 },
        { year: '1996', value: 3 },
        { year: '1997', value: 4 },
        { year: '1998', value: 3.5 },
        { year: '1999', value: 5 },
        { year: '2000', value: 4.9 },
        { year: '2001', value: 3 },
        { year: '2002', value: 4 },
        { year: '2003', value: 3.5 },
        { year: '2003', value: 5 },
        { year: '2004', value: 4.9 },
      ],
      xField:'year',
      yField:'value',
      color: '#a8ddb5',
      columnWidthRatio:.3
    })
    // 3.2 渲染
    plot.render();
  </script>
</body>
</html>